<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>知乎 - 有问题，上知乎</title>
        <style>
            body{
                margin: 0;
                padding: 0;
            }
            .wrapper{
                width: 100%;
                height: 100%;
            }
            .bgc{
                width: 100%;
                height: 100%;
                background: #b8e5f8;
            }
            .zh-content{
                width: 100%;
                height: 1000px;
                position: relative;
            }
            .zhihu-bg{
                width: 100%;
                height: 100vh;
                background-image: url("zhihu-bg.png");
                background-repeat: no-repeat;
                background-size: cover;
                display: flex;
                overflow: auto;
                position: relative;
                background-attachment: fixed;
            }
            .zh-title{
                width: 128px;
                height: 81px;
                position: relative;
                margin: 24px auto;
            }
            .zh-logo{
                width: 128px;
                height: 81px;
            }
            .login-content{
                height: 375px;
                width: 400px;
                margin:0 auto;
                background: #fff;
                position: relative;
                box-sizing: border-box;
            }
            .content{
                width: 400px;
                height: 375px;
                box-sizing: border-box;
                padding: 0 24px 84px;
            }
            .social-login{
                width: 400px;
                height: 60px;
                box-sizing: border-box;
                padding: 0 24px;
                margin:0 auto;
                margin-bottom: 10px;
                background: #f6f6f6;
            }
            .login-choose{
                width: 352px;
                height: 60px;
            }
            .no-password{
                width: 80px;
                height: 60px;
                margin-right: 24px;
                float: left;
                line-height: 60px;
                color: #444;
                cursor: pointer;
                font-size: 16px;
            }
            .no-password:after{
                border-bottom: 2px solid #2284ff;
            }
            .password-login{
                width: 80px;
                height: 60px;
                margin-right: 24px;
                float: left;
                line-height: 60px;
                color: #444;
                cursor: pointer;
                font-size: 16px;
            }

        </style>
    </head>
    <body>

        <div class="wrapper">
            <div class="bgc">
                <div class="zhihu-bg">
                    <div class="zh-content">

                        <div class="zh-title">
                            <img class="zh-logo" src="zhihu-title.png">
                        </div>

                        <div class="login-content">
                            <div class="content">
                                <form>
                                    <div class="login-choose">
                                        <div class="no-password">免密码登录</div>
                                        <div class="password-login">密码登录</div>
                                    </div>
                                </form>
                            </div>
                        </div>
                        <!--第三方登录-->
                        <div class="social-login">

                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        
        <script type="text/javascript">
            ( function () {
                let first=document.querySelector(".no-password");
                let second=document.querySelector(".password-login");

                let action = function () {
                    first.style.borderBottom="3px solid #2284ff";
                    second.style.borderBottom="none";
                    first.style.color="#1a1a1a";
                    second.style.color="#444";
                    first.style.fontWeight="600";
                    second.style.fontWeight="500";
                }

                first.addEventListener('click', action , false);

                let action2 =function(){
                    second.style.borderBottom="3px solid #2284ff";
                    first.style.borderBottom="none";
                    second.style.color="#1a1a1a";
                    first.style.color="#444";
                    second.style.fontWeight="600";
                    first.style.fontWeight="500";
                }

                second.addEventListener('click' , action2 , false)

            })();
        </script>
        
    </body>
</html>